<template>
  <div class='container'>
    <dv-loading v-show='spinning' style='color: #000;height: 100%;'>加载中...</dv-loading>
    <div v-show='!spinning' style='height: 100%'>
      <div v-show='svgStr' id='svgContainer'>
      </div>
      <a-empty style='height: 100%' v-show='!svgStr'></a-empty>
    </div>
  </div>
</template>

<script>

export default {
  components: {},
  mixins: [],
  props: {
    targetData: {
      type: Array,
      default() {
        return []
      }
    },
    path: {
      type: String,
      default: '@/assets/home.svg'
    },
    svgStr: {
      type: String,
      default() {
        return ''
      }
    },
    fullscreenFlag: {
      type: Boolean,
      default: false
    },
    eventTags: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      spinning: false,
      svgWidth: 0,
      svgHeight: 0
    }
  },
  computed: {},
  watch: {
    targetData: {
      handler(val) {
        this._traverseData(val)
        // this.createPopover()
      },
      deep: true
    },
    fullscreenFlag(val) {
      this.createPopover()
      const targetSvgHTML = document.querySelector('#svgContainer svg')
      // if (val) {
      //   targetSvgHTML.setAttribute('width', 1280)
      //   targetSvgHTML.setAttribute('height', 720)
      // }else{
      //   targetSvgHTML.setAttribute('width', '100%')
      //   targetSvgHTML.setAttribute('height', '100%')
      // }
    },
    svgStr(val) {
      this.spinning = true
      const that = this
      const targetHtmlDoc = document.querySelector('#svgContainer')
      targetHtmlDoc.innerHTML = ''
      if (val) {
        if (targetHtmlDoc) {
          targetHtmlDoc.innerHTML = val
          that.createPopover()
          const targetSvgHTML = document.querySelector('#svgContainer svg')
          // this.svgWidth = targetSvgHTML.getAttribute('width')
          // this.svgHeight = targetSvgHTML.getAttribute('height')
          targetSvgHTML.setAttribute('width', 1920)
          targetSvgHTML.setAttribute('height', 1080)
          this._traverseData(this.targetData)
        }
        this.spinning = false
      }else{
        this.spinning = false
      }
    },
    eventTags: {
      handler(val) {
        this.$nextTick(() => {
          this.createPopover()
        })
      },
      deep: true
    }
  },
  created() {
  },
  mounted() {
    this.spinning = true
    setTimeout(() => {
      this.spinning = false
    }, 2000)
  },
  updated() {
  },
  destroyed() {
  },
  methods: {
    _traverseData(data = []) {
      if (data.length === 0) return
      data.forEach(item => {
        const targetValue = item.pointValue ? item.pointValue : '--'
        this._draw(item.pointId, targetValue)
      })
    },
    _draw(id, targetData = 0) {
      const that = this
      const allTarget = document.querySelectorAll(`[pointID=pointID_${id}]`)
      if (allTarget && allTarget.length) {
        for (let i = 0; i < allTarget.length; i++) {
          // 需要计算
          if (allTarget[i].getAttribute('checkflag')) {
            // 运算基础数据为空时设置为0
            allTarget[i].innerHTML = that.computedReuslut(allTarget[i], targetData === '--' ? 0 : targetData)
          } else {
            allTarget[i].innerHTML = targetData
          }
        }
      }
    },
    // 计算展示数据
    computedReuslut(ele, baseData, selecterPrefix = '') {
      debugger
      const that = this
      let targetData = Number(baseData)
      // let targetData = 0
      let nums = ele.getAttribute(selecterPrefix + 'nums')
      for (let i = 0; i < nums; i++) {
        const currentSign = ele.getAttribute(selecterPrefix + 'sign' + (i + 1))
        let currentNum = ele.getAttribute(selecterPrefix + 'cumputednum' + (i + 1))
        if (currentNum.indexOf('#') !== -1) {
          currentNum = Number(currentNum.replace('#', ''))
        } else {
          // 点位对应数据
          const resultObj = that.targetData.find(item => item.pointId === currentNum)
          // 获取到对应点位具体数值赋值
          currentNum = resultObj && resultObj.pointValue ? resultObj.pointValue : 0
        }
        if (currentSign === '+') {
          targetData = targetData + Number(currentNum)
        }
        if (currentSign === '-') {
          targetData = targetData - Number(currentNum)
        }
        if (currentSign === '*') {
          targetData = targetData * Number(currentNum)
        }
        if (currentSign === '/') {
          targetData = targetData / Number(currentNum)
        }
      }
      // 保留两位小数
      return Number(targetData).toFixed(2)
    },
    createPopover() {
      const that = this
      const datas = this.eventTags
      for (let i = 0; i < datas.length; i++) {
        const eventTagItem = datas[i]
        // 计算展示内容
        const getContent = () => {
          return that.computedEventShowContent($(`[event_tag=${eventTagItem}]`))
        }
        // const content =
        $(`[event_tag=${eventTagItem}]`).webuiPopover('destroy')
        $(`[event_tag=${eventTagItem}]`).webuiPopover({
          // content: content,
          closeable: true,
          animation: 'pop',
          // type: 'async',
          getContent: getContent,
          targetContainer: $('#svgContainer')[0],
          fullscreenFlag: !that.fullscreenFlag
        })
      }
    },
    //计算点击后弹框展示内容
    // 必须传入jquery选择器选中元素
    computedEventShowContent(selecter) {
      if (!selecter) {
        return ''
      }
      let result = ''
      const evnet_num = selecter.attr('event_num')
      for (let i = 0; i < evnet_num; i++) {
        //获取label
        const container = $('<div></div>')
        const labelText = selecter.attr('event_title' + (i + 1))
        const label = `<span>${labelText}：</span>`
        //获取基础数据
        const pointId = selecter.attr('event_' + (i + 1) + '_pointid') ? selecter.attr('event_' + (i + 1) + '_pointid').replace('pointID_', '') : ''
        const basicData = this.targetData.find(item => item.pointId === pointId) ? this.targetData.find(item => item.pointId === pointId)['pointValue'] : ''
        // 是否需要进行计算
        const needComputed = selecter.attr('event_' + (i + 1) + '_checkflag')
        // 直接返回所选数据
        let tempRes = ''
        if (!needComputed) {
          tempRes = label + `<span>${basicData ? Number(basicData).toFixed(2) : '--'}</span><br/>`
          container.html(tempRes)
        } else {
          let resultData = basicData
          resultData = this.computedReuslut(selecter[0], resultData, 'event_' + (i + 1) + '_')
          tempRes = label + `<span>${resultData ? Number(resultData).toFixed(2) : '--'}</span><br/>`
        }
        container.html(tempRes)
        result += container.html()
      }
      return result
    }
  }
}
</script>
<style lang='less' scoped>
.container {
  height: 100%;
}

#svgContainer {
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
